<template>
  <div class="el-custom-body">
    <el-row :gutter="20">
      <el-col :span="10">
        <el-card class="custom-el-card" shadow="never">
          <template v-slot:header>
            <div class="custom-el-card-header">
              <img alt="" :src="user" />
              <span>个人中心</span>
            </div>
          </template>
          <div class="custom-card-body">
            <div class="custom-user-body">
              <div class="user-image">
                <img :src="headerImg ? headerImg : defaultHeaderImg" />
              </div>
              <div class="user-info-body">
                <div class="custom-user-info">
                  <strong>姓名：</strong>
                  {{ (userInfo || {}).showName }}
                </div>
                <div class="custom-user-info"><strong>账号：</strong>{{ userName }}</div>
                <div class="custom-user-info">
                  <strong>部门：</strong>{{ (userInfo || {}).deptName }}
                </div>
              </div>
            </div>
            <div class="custom-user-count">
              <router-link class="custom-user-count-item" to="/formMyTask">
                <div class="item-title">
                  <img alt="" :src="db" />
                  <span>待办任务</span>
                </div>
                <div class="item-count">{{ total }}</div>
              </router-link>
              <router-link class="custom-user-count-item" to="/formMessage?type=remindingMessage">
                <div class="item-title"><img alt="" :src="yb" /><span>催办任务</span></div>
                <div class="item-count">{{ totalCb }}</div>
              </router-link>
              <router-link class="custom-user-count-item" to="/formMessage?type=copyMessage">
                <div class="item-title"><img alt="" :src="lsrw" /><span>知会消息</span></div>
                <div class="item-count">{{ totalCopy }}</div>
              </router-link>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="14">
        <el-card class="custom-el-card" shadow="never">
          <template v-slot:header>
            <div class="custom-el-card-header">
              <img alt="" :src="cb" />
              <span
              >我的催办 (<label class="label-font">{{ totalCb }}</label
              >)</span
              >
              <router-link class="custom-more" to="/formMessage?type=remindingMessage"
              >更多</router-link
              >
            </div>
          </template>
          <div class="custom-card-body" v-if="cbList && cbList.length > 0" style="overflow-y: auto">
            <div class="custom-db-li" v-for="(item, index) in cbList" :key="`cb-li-${index}`">
              <div class="item-body">
                <div class="item-header-title">{{ item.processDefinitionName }}</div>
                <div class="item-header-title">
                  <div class="item-span">催办人：{{ item.createUsername }}</div>
                  <div class="item-span">催办时间：｛｛ item.createTime}｝</div>
                  <div class="item-span align-right">
                    <el-link type="primary" @click="onSubmitCb(item)">立即办理</el-link>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="custom-card-body" v-else>
            <el-empty description="暂无数据" />
          </div>
        </el-card>
      </el-col>
      <el-col :span="10">
        <el-card class="custom-el-card" shadow="never">
          <template v-slot:header>
            <div class="custom-el-card-header">
              <img alt="" :src="zh" />
              <span>知会消息</span>
              <router-link class="custom-more" to="/formMessage?type=copyMessage">更多</router-link>
            </div>
          </template>
          <div
            class="custom-card-body"
            style="height: 500px"
            v-if="copyList && copyList.length > 0"
          >
            <el-timeline>
              <el-timeline-item
                v-for="(item, index) in copyList"
                :key="`copy-li-${index}`"
                :timestamp="item.createTime"
              >
                <div class="custom-li">
                  <span>{{ item.processDefinitionName }}</span>
                  <el-link type="primary" @click="onSubmitCb(item, item.messageId)">详情</el-link>
                </div>
              </el-timeline-item>
            </el-timeline>
          </div>
          <div class="custom-card-body" v-else style="height: 500px">
            <el-empty description="暂无数据" />
          </div>
        </el-card>
      </el-col>
      <el-col :span="14">
        <el-card class="custom-el-card" shadow="never">
          <template v-slot:header>
            <div class="custom-el-card-header">
              <img alt="" :src="db1" />
              <span
              >我的待办 (<label class="label-font">{{ total }}</label
              >)</span
              >
              <router-link class="custom-more" to="/formMyTask">更多</router-link>
            </div>
          </template>
          <div
            class="custom-card-body"
            v-if="dataList && dataList.length > 0"
            style="overflow-y: auto; height: 500px"
          >
            <div class="custom-db-li" v-for="(item, index) in dataList" :key="`db-li-${index}`">
              <div class="item-body">
                <div class="item-header-title">{{ item.processDefinitionName }}</div>
                <div class="item-header-title">
                  <div class="item-span">申请人：{{ item.showName }}</div>
                  <div class="item-span">申请时间：{{ item.processInstanceStartTime }}</div>
                  <div class="item-span align-right">
                    <el-link type="primary" @click="onSubmit(item)">立即办理</el-link>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="custom-card-body" v-else style="overflow-y: auto; height: 500px">
            <el-empty description="暂无数据" />
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';
import user from '@/assets/plugin/img/user.png';
import db from '@/assets/plugin/img/db.png';
import zh from '@/assets/plugin/img/zh.png';
import lsrw from '@/assets/plugin/img/lsrw.png';
import db1 from '@/assets/plugin/img/db_1.png';
import yb from '@/assets/plugin/img/yb.png';
import cb from '@/assets/plugin/img/cb.png';
import defaultHeaderImg from '@/assets/img/default-header.jpg';
import { useLoginStore } from '@/store';
import { useUpload } from '@/common/hooks/useUpload';
import { welcomeDb, welcomeCb, welcomeCopy, getWorkNo } from '@/common/portal/welcome';
const loginStore = useLoginStore();
const userInfo = loginStore.userInfo;
const { getUploadFileUrl } = useUpload();
const { loadData, total, dataList, onSubmit } = welcomeDb();
const { loadCb, cbList, totalCb, onSubmitCb } = welcomeCb();
const { loadCopy, copyList, totalCopy } = welcomeCopy();
const { userName } = getWorkNo();
onMounted(() => {
  loadData();
  loadCb();
  loadCopy();
});
// 用户头像
const headerImg = computed(() => {
  if (userInfo && userInfo.headImageUrl) {
    let temp = getUploadFileUrl(userInfo.headImageUrl, {
      filename: userInfo.headImageUrl.filename,
    });
    return temp;
  } else {
    return null;
  }
});
</script>

<style lang="scss" scoped>
.custom-el-card {
  border: 1px solid #dcdfe6;
  border-radius: 5px;
  transition: all var(--el-transition-duration) var(--el-transition-function-ease-in-out-bezier),
  border 0s, color 0.05s, font-size 0s !important;
  margin-bottom: 20px;
  .custom-el-card-header {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 1.1rem;
    font-weight: 500;
    position: relative;
    img {
      width: 18px;
      height: 18px;
    }
    span {
      padding: 0 8px;
    }
  }
  .custom-card-body {
    width: 100%;
    height: 300px;
    .custom-user-body {
      width: 100%;
      height: 120px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      .user-image {
        width: 80px;
        padding: 0 10px;
        box-sizing: border-box;
        img {
          width: 100%;
          border-radius: 6px;
        }
      }
      .user-info-body {
        height: 120px;
        flex: 1 1;
        display: flex;
        margin-left: 10px;
        flex-flow: column nowrap;
        .custom-user-info {
          width: 100%;
          height: 40px;
          display: flex;
          align-items: center;
          justify-content: flex-start;
        }
      }
    }
    .custom-user-count {
      width: 100%;
      height: 180px;
      display: flex;
      align-items: center;
      justify-content: center;
      .custom-user-count-item {
        width: 33.333%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-flow: column nowrap;
        .item-title {
          width: 100%;
          height: 40px;
          font-size: 0.9rem;
          display: flex;
          align-items: center;
          justify-content: center;
          img {
            width: 16px;
            height: 16px;
          }
          span {
            padding: 0 5px;
          }
        }
        .item-count {
          width: 100%;
          height: 80px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 1.2rem;
        }
      }
    }
    .custom-db-li {
      width: 100%;
      height: 80px;
      padding: 5px 0;
      box-sizing: border-box;
      .item-body {
        width: 100%;
        height: 100%;
        border-radius: 5px;
        border-top: 1px solid #dcdfe6;
        border-right: 1px solid #dcdfe6;
        border-bottom: 1px solid #dcdfe6;
        cursor: pointer;
        border-left: 5px solid #405eff;
        padding: 0 10px;
        display: flex;
        flex-flow: column nowrap;
        .item-header-title {
          width: 100%;
          height: 35px;
          display: flex;
          align-items: center;
          justify-content: flex-start;
          font-weight: 500;
          .item-span {
            width: 33.33%;
            display: flex;
            font-size: 0.9rem;
            color: #909399;
          }
          .align-right {
            justify-content: right;
          }
        }
      }
    }
  }
}
.label-font {
  color: #975b33;
}
.custom-li {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.custom-more {
  position: absolute;
  right: 10px;
  top: 0;
  width: 40px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #0a84ff;
}
</style>
